<template>
  <el-dialog
    v-model="pageFuncDialogVisible"
    title="功能列表"
    width="650"
    class="func-dialog-box"
    :before-close="handleClose"
  >
    <div class="func-data-box flex" v-if="funcList.length">
      <div class="func-data-box-left">
        <el-scrollbar height="340px">
          <div
            class="func-data-box-left-tab-item"
            v-for="(item, index) in funcList"
            :key="index"
          >
            删除用户
          </div>
        </el-scrollbar>
        <el-button
          type="primary"
          class="add-func-btn"
          @click="addDialogVisible = true"
        >
          新增功能
        </el-button>
      </div>
      <div class="func-data-box-right">
        <el-form :model="pageForm" label-width="auto" label-position="left">
          <el-form-item label="功能类型：">
            <el-radio-group v-model="pageForm.radio1">
              <el-radio :label="1" size="large">操作类</el-radio>
              <el-radio :label="2" size="large">跳转类</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="功能集合：">
            <el-radio-group v-model="pageForm.radio2">
              <el-radio :label="1" size="large">是</el-radio>
              <el-radio :label="2" size="large">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="名称：">
            <el-input class="input-box" v-model="pageForm.name" />
          </el-form-item>
          <el-form-item label="接口路径：">
            <el-input class="input-box" v-model="pageForm.name" />
          </el-form-item>
          <el-form-item label="">
            <el-button type="primary">修改</el-button>
            <el-button type="danger" plain>删除</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <!-- 无数据 -->
    <div class="func-data-box flex" v-if="!funcList.length">
      <div class="no-data">
        <el-empty>
          <el-button type="primary" @click="addDialogVisible = true">
            点击添加
          </el-button>
        </el-empty>
      </div>
    </div>
  </el-dialog>
  <!-- 添加功能 -->
  <el-dialog
    v-model="addDialogVisible"
    title="功能添加"
    width="650"
    class="func-dialog-box"
    :before-close="addHandleClose"
  >
    <div class="add-fun-box">
      <el-form :model="pageForm" label-width="auto" label-position="left">
        <el-form-item label="功能类型：">
          <el-radio-group v-model="pageForm.radio1">
            <el-radio :label="1" size="large">操作类</el-radio>
            <el-radio :label="2" size="large">跳转类</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="功能集合：">
          <el-radio-group v-model="pageForm.radio2">
            <el-radio :label="1" size="large">是</el-radio>
            <el-radio :label="2" size="large">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="名称：">
          <el-input class="input-box" v-model="pageForm.name" />
        </el-form-item>
        <el-form-item label="接口路径：">
          <el-input class="input-box" v-model="pageForm.name" />
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="dialogVisible = false">
          添加
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup>
import {
  computed,
  watch,
  onMounted,
  getCurrentInstance,
  ref,
  defineEmits,
  nextTick,
} from 'vue'
const { proxy: that } = getCurrentInstance()
const props = defineProps({
  show: {
    type: Boolean,
    default: () => {
      return false
    },
  },
  tableData: {
    type: Array,
    default: () => {
      return []
    },
  },
})
// 添加功能
let addDialogVisible = ref(false)
const addHandleClose = () => {
  addDialogVisible.value = false
}
// 页面功能
let funcList = ref([1])
let pageForm = ref({})
let pageFuncDialogVisible = ref(false)
watch(
  () => props.show,
  (newValue, oldValue) => {
    pageFuncDialogVisible.value = props.show
  }
)
const emit = defineEmits(['onClose'])
const handleClose = () => {
  emit('onClose', false)
}
const SubmitFUnc = () => {}
</script>
<style lang="scss">
@import './store_dislog.scss';
</style>